<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div id="choose-com" v-show="chooseShow"  :chooseShow="chooseShow">
      <div class="c-box-2">
        <mu-list>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-sub-title>
                <div class="fleft order-timebox order-title" @click="stimeshow=true">
                  <div class="time-title">开始时间</div>
                  <div class="time-des">{{starttime}}</div>
                </div>
                <div class="hour-box">
                  <span class="hour">至</span>
                </div>

                <div class="fright order-timebox order-title" @click="etimeshow=true">
                  <div class="time-title">结束时间</div>
                  <div class="time-des">{{endtime}}</div>
                </div>
                <div class="_clear"></div>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="stateshow=true">
                反馈状态
                <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{state}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showtype=true">
                反馈类型
                <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{type}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>

          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title class="c-btn-box">
                <mu-button class="blur-btn btn fleft out-btn" @click="close">取消</mu-button>
                <mu-button class="blur-btn btn fright" @click="submit">确定</mu-button>
                <div class="_clear"></div>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </div>
      <van-popup v-model="stimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="start.currentDate"
          type="date"
          :min-date="start.minDate"
          :max-date="start.maxDate"
          @confirm="startTimeChange"
        />
      </van-popup>
      <van-popup v-model="etimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="end.currentDate"
          type="date"
          :min-date="end.minDate"
          :max-date="end.maxDate"
          @confirm="endTimeChange"
        />
      </van-popup>

      <van-popup v-model="stateshow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="statusList"
          @confirm="statusChange"
          show-toolbar
          title="请选择反馈状态"
          cancel-button-text=" "
        />
      </van-popup>
      <van-popup v-model="showtype" position="bottom" class="bottom-picker">
        <van-picker
          :columns="typeList"
          @confirm="typeChange"
          show-toolbar
          title="请选择反馈类型"
          cancel-button-text=" "
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "vant";
import { DatetimePicker } from "vant";
import { Picker } from "vant";
import "vant/lib/popup/style/index";
import "vant/lib/datetime-picker/style/index";
import { formatDate } from "@/utils/formart";
Vue.use(DatetimePicker);
Vue.use(Popup);
Vue.use(Picker);
export default {
  name: "choose",
  data() {
    return {
      chooseShow: false,
      showtype: false,
      stateshow: false,
      stimeshow: false,
      etimeshow: false,
      state: "",
      type:'',
      a:new Date(),
      start: {
        minHour: 10,
        maxHour: 20,

        maxDate: new Date(),
        currentDate: new Date()
      },

      end: {
        minHour: 10,
        maxHour: 20,
        minDdate: this.starttime,
        maxDate: new Date(),
        currentDate: new Date()
      },
      choose: {
        type: "",
        state: "",
        stime: formatDate(new Date(), "yyyy-MM-dd"),
        etime: formatDate(new Date(), "yyyy-MM-dd"),

      },
      typeList: [],
      statusList: [{ text: "处理完成", id: 1 }, { text: "未处理", id: 2 }],
      starttime: formatDate(new Date(), "yyyy-MM-dd"),
      endtime: formatDate(new Date(), "yyyy-MM-dd")
    };
  },
  mounted() {
    this.$api.getCodesByParent(4).then(res => {
      let a = window.JSON.stringify(res.data.data).replace(/codeName/g, "text");

      let b = window.JSON.parse(a);

      this.typeList = b;
    });
  },
  methods: {
    Showchoosediv() {
      this.chooseShow = true;
    },

    endTimeChange(e) {
      if(e<this.a){
        Toast('结束时间不能小于开始时间');
        return;
      }
      this.endtime = formatDate(e, "yyyy-MM-dd");
      this.choose.etime = formatDate(e, "yyyy-MM-dd");
      this.etimeshow = false;
    },
    startTimeChange(e) {
       this.a = e;
      this.starttime = formatDate(e, "yyyy-MM-dd");
      this.choose.stime = formatDate(e, "yyyy-MM-dd");
      this.stimeshow = false;
    },

    typeChange(v) {
      console.log(v);
      this.showtype = false;
      this.type = v.text;
      this.choose.type = v.code;
    },
    statusChange(v) {
      this.choose.state = v.id;
      this.state = v.text;
      this.stateshow = false;
    },

    close() {
      this.chooseShow = false;
    },
    submit() {
      this.$emit("chooseDate", this.choose);
      this.chooseShow = false;
    }
  }
};
</script>


<style lang="scss" scoped>
#choose-com{
  padding-top:30px;

}
.c-box-2 .mu-item{
    margin: 10px 20px !important;
}
</style>
